/********************************************************************
	ZYPOP 
	FREE WEB TEMPLATES
********************************************************************/


/**
This file contains the core CSS for this template, built on the Bootstrap framework 
Set the variable values in _variables.scss 
**/


/** 
Page structure and elements 
**/
.bg-primary {
    background-color: $primary !important;
}


body { 
    background-color: #f0f0f0;	
}


.outer-wrapper {
    background-color: $white;
    max-width: $wrapper-max-width;
    margin: 0 auto;
    box-shadow: 0px 0px 15px #ccc;
}


main {
	padding-top: 1em;
}
.text-primary {
    color: $primary !important;
}

a, .page-link {
    color: $secondary;
    font-weight: bold;
    &:hover,
    &:focus,
    &:active {
        color: darken($secondary, 15%);
    }
}

fieldset { 
    margin-bottom: $spacer; 
    display: block;
    border-top: 1px solid #ccc;
}
fieldset legend { 
    width: auto;
    padding-right: 0.5rem;
    font-size: 1.1rem;
    font-weight: bold;
}

table th { 
    background-color: $secondary;
    color: $white;
	border-color:darken($secondary, 15%) !important;
	border-bottom: 1px solid darken($secondary, 15%);
}

blockquote {
    display: block;
    border-left: 5px solid #ccc;
    padding: 0.5rem;
	color: #666;
    margin-bottom: $spacer;

}
.btn { 
    font-weight: bold;
}
.btn-secondary, .badge-secondary {
    color: $white;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6
{
    color: #444;
    font-weight: bold;
}

h3 { 
    color: lighten($secondary, 10%);
}

/** 
Jumbotron / Slider
**/
.jumbotron-narrow { 
    padding: $jumbotron-padding;
}
.jumbotron-wrap {
    background-color: lighten($primary, 5%);
    background: -moz-linear-gradient(top, lighten($primary, 5%) 0%, $primary 100%); 
    background: -webkit-linear-gradient(top, lighten($primary, 5%) 0%, $primary 100%);
    background: linear-gradient(to bottom, lighten($primary, 5%) 0%, $primary 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten($primary, 5%)', endColorstr='$primary',GradientType=0 );   
    box-shadow: 0 5px 10px darken($content-bg-color, 20%);
    margin-bottom: 1rem;
}
.jumbotron-wrap .jumbotron { 
        background: transparent;
        margin-bottom: 0; 
}
.jumbotron-wrap .jumbotron .btn-primary {
    background-color: $gray-100;
    border-color: $gray-100;
    color: $black;
}
.jumbotron-wrap .jumbotron .btn-outline-primary {
    color: $gray-100;
    border-color: $gray-100;
    &:hover,
    &:focus,
    &:active {
        background-color: $gray-100;
        color: $black;
    }
}
.jumbotron-wrap h1, .jumbotron-wrap .h1 {
    color: $gray-200;
}



/**
Header 
**/
header {
    background-color: #fff;
}
header img {
    max-width: 100%;
    height: auto;
}

header .headers {
    padding: 1rem ($grid-gutter-width / 2);
}
header h1 {
	color: $secondary;
	letter-spacing: -0.1rem;
}
header h2 {
    font-size: 1.5rem;
    font-weight: 300;
    color: lighten($body-color, 15%);
}


/** 
Navbar 
**/
.navbar-toggler {
	margin: 0.5rem;
}
.navbar {
	padding: 0 ($grid-gutter-width / 2);
}
.navbar-dark .navbar-brand {
  	color: $white;  
    font-size: 2.1em;
    &:hover,
    &:focus,
    &:active {
        color: $white;
    }
}

.navbar-dark .navbar-nav .active .nav-link {
	background-color: $secondary;
     color: $white;
    &:hover,
     &:focus,
     &:active {
        background-color: $secondary;
    }
}

.navbar-dark .navbar-nav .nav-link
 {
     color: #999;
     font-weight: bold;
     padding: 1rem 3rem !important;
     font-size: 1.0rem;
     &:hover,
     &:focus,
     &:active {
        background-color: darken($primary, 5%);
    }
}

/**
Footer
**/
footer { 
	background-color: $primary;
    padding: ($grid-gutter-width / 2);
    color: lighten($primary, 30%);
	font-size: 0.9rem;
}
footer p:last-child {
    margin-bottom: 0;
}
footer  a {
    color: lighten($primary, 40%);
    font-weight: normal;
    &:hover,
    &:focus,
    &:active {
        color: lighten($primary, 60%);
    }
}

/** 
Social Icons
**/
.social-icons {
    background-color: $content-bg-color;
   padding: ($grid-gutter-width / 2)
}
.social-icons a {
    margin: 0 20px; 
    color: darken($content-bg-color, 20%);
    font-weight: normal;
    &:hover,
    &:focus,
    &:active {
        color: darken($content-bg-color, 40%);
    }
}



/** 
Articles
**/
main {
    padding: ($grid-gutter-width / 2)
}

article {
	margin-bottom: 2rem;
	border-bottom: 1px solid lighten($content-bg-color, 5%);
	padding-bottom: 2rem;
	font-size: 1.2rem;
}

article h2.article-title {
	font-size: 3rem;
	letter-spacing: -2px;
}

article p.article-meta {
	color: #ccc;
	font-size: 1rem;
}



/** 
Responsive typography
https://v4-alpha.getbootstrap.com/content/typography/#responsive-typography
**/
html {
    font-size: 14px;
}
@include media-breakpoint-up(xs) {
  html {
    font-size: 10px;
  }
}
@include media-breakpoint-up(md) {
  html {
    font-size: 12px;
  }
    .navbar {
	   padding: 0;
    }
    .outer-wrapper {
    margin: 3rem auto;
    }header .headers, footer {
    padding: 2rem 3rem;
}main, .social-icons,  {
    padding: 3rem;
}
    

}
@include media-breakpoint-up(lg) {
  html {
    font-size: 14px;
  }
}